<template>
	<view class="goods-content">
		<ycy-top-bar>商品管理</ycy-top-bar>
		<u-toast ref="uToast"></u-toast>
		<view class="search">
			<u-search shape="square" placeholder="请输入商品关键字搜索" v-model="name" searchIconColor="#9dae8a" @clear="getGoodsList" @custom="getGoodsList"></u-search>
		</view>
		<view class="main-box" :style="mainBoxStyle">
			<view class="side-bar"><ycy-side-bar ref="sideBarRef" textKey="name" :list="typeList" @onCilck="onSideBarCilck"></ycy-side-bar></view>
			<view class="main" :style="searchStyle">
				<u-picker :show="isShowTypePicker" :columns="typePickerList" keyName="name" @confirm="onTypeConfirm" @cancel="isShowTypePicker=false"></u-picker>
				<u-button v-if="activeItem.name == '全部'" :text="`新增商品`" icon="plus" color="#9dae8a" iconColor="#fff" @click="onChooseGoodsType"></u-button>
				<u-button v-else :text="`新增${ activeItem.name ? activeItem.name : '' }商品`"
						  icon="plus" color="#9dae8a" iconColor="#fff" @click="onAdd"></u-button>
				<view class="goods-list">
					<view v-if="goodsList.length == 0" style="position: absolute; left:60%; top: 50%; transform: translate(-50%,-50%);">
						<u-empty mode="order" iconColor="#9dae8a" textColor="#9dae8a" textSize="16" text="暂无该类商品"></u-empty>
					</view>
					<ycy-goods-list v-else titleKey="name" :slideOption="options" :list="goodsList" @onItemClick="check" @onBtnClick="onBtnClick"></ycy-goods-list>
				</view>
			</view>
		</view>
		<u-modal :show="isShowDelete" :showCancelButton="true" :title="`确定要删除 ${deleteItem.name} 商品吗`" @cancel="isShowDelete=false"  @confirm="onSubmitDelete"></u-modal>
	</view>
</template>

<script>
import { onLoad } from 'uview-ui/libs/mixin/mixin';
	export default {
		async onShow() {
			uni.createSelectorQuery().select('.side-bar').boundingClientRect(data => {
				this.sideBarWidth = data.width;
				this.mainBoxOffset = data.top;
			}).exec();
			await this.getGoodsTypeList();
			this.getGoodsList();
		},
		data() {
			return {
				deleteItem: {},
				isShowTypePicker: false,
				isShowDelete: false,
				mainBoxOffset: 0,
				sideBarWidth: 0,
				activeItem: { id: '', name: '全部' },
				typePickerList: [[]],
				name: '',
				options: [{
						text: '修改',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},
				],
				typeList: [],
				goodsList: []
			}
		},
		computed: {
			searchStyle() {
				return `width: calc(100% - ${this.sideBarWidth}px)`;
			},
			mainBoxStyle() {
				return `height: calc(100% - ${this.mainBoxOffset}px)`;
			}
		},
		methods: {
			onSideBarCilck(activeObject) {
				this.activeItem = activeObject.item;
				this.getGoodsList();
			},
			onBtnClick(btnObject) {
				const index = btnObject.index;
				const item = JSON.parse(btnObject.name);
				if (index == 0) this.update(item);
				else if (index == 1) this.delete(item);
			},
			check(clickItem) {
				uni.navigateTo({ url: `./goodsEdit?type=check&&goodsId=${ clickItem.item.id }` })
				// console.log('查看', clickItem.item)
			},
			update(item) {
				uni.navigateTo({ url: `./goodsEdit?type=edit&&goodsId=${ item.id }` })
				// console.log('修改', item)
			},
			delete(item) {
				this.deleteItem = item;
				this.isShowDelete = true;
			},
			async onSubmitDelete() {
				this.isShowDelete = false;
				const res = await this.$api.goodsManage.delete(this.deleteItem.id);
				if(res.code == 200) {
					this.getGoodsList();
					this.$toast.success(this,'删除成功');
				}
				else this.$toast.error(this,res.message);
				// console.log('删除',item)
			},
			onAdd() {
				uni.navigateTo({ url: `./goodsEdit?type=add&&typeId=${ this.activeItem.id }&&typeName=${ this.activeItem.name }` })
			},
			onChooseGoodsType() {
				this.isShowTypePicker = true;
			},
			onTypeConfirm(item) {
				//item中包括 indexs,value,values 其中indexs是下标数组,value是对应值的数组,values是所有选项值的数组。
				this.isShowTypePicker = false;
				uni.navigateTo({ url: `./goodsEdit?type=add&&typeId=${ item.value[0].id }&&typeName=${ item.value[0].name }` })
			},
			async onSearch() {
				const res = await this.$api.goodsManage.findAll('',this.name);
				if(res.code == 200) {
					// this.$refs.sideBarRef.activeIndex = 0;
					// this.activeItem = this.typeList[0];  //全部
					this.goodsList = res.data;
				}
				else this.$toast.error(this,res.message)
			},
			// async onReset() {
			// 	const res = await this.$api.goodsManage.findAll('','');
			// 	if(res.code == 200) {
			// 		this.activeItem = this.typeList[0];  //全部
			// 		this.goodsList = res.data;
			// 	}
			// 	else this.$toast.error(this,res.message)
			// },
			async getGoodsList() {
				console.log('this.activeItem',this.activeItem)
				const res = await this.$api.goodsManage.findAll(this.activeItem.id,this.name);
				if(res.code == 200) this.goodsList = res.data;
				else this.$toast.error(this,res.message)
				// setTimeout(() => {
				// 	if(this.activeItem.id == '1') {
				// 		this.goodsList = [
				// 			{
				// 				typeId: '1',
				// 				typeName: '文胸专区',
				// 				title: '小精灵蕾丝文胸',
				// 				price: 259.00,
				// 				paramsList: [
				// 					{ size: 'L', colorList: [{ color: '暗夜蓝',count: 2 },{ color: '燕麦肤',count: 3 }] },
				// 					{ size: 'XL', colorList: [{ color: '冰青色',count: 1 },{ color: '香芋紫',count: 2 }] },
				// 				],
				// 				photo: '../static/image/defaultImg.png'
				// 			},
				// 			{
				// 				typeId: '1',
				// 				typeName: '文胸专区',
				// 				title: '小仙女蕾丝套装',
				// 				price: 299.00,
				// 				paramsList: [],
				// 				photo: '../static/image/defaultImg.png'
				// 			},
				// 			{
				// 				typeId: '1',
				// 				typeName: '文胸专区',
				// 				title: 'QQ兔果冻文胸',
				// 				price: 199.00,
				// 				paramsList: [],
				// 				photo: '../static/image/defaultImg.png'
				// 			},
				// 		]
				// 	}else {
				// 		this.goodsList = []
				// 	}
				// },200)
			},
			async getGoodsDetail(goodsId) {
				const res = await this.$api.goodsManage.findOneDetail(goodsId);
				if(res.code == 200) return res.data;
				else this.$toast.error(this,res.message);
				return;
			},
			async getGoodsTypeList() {
				const res = await this.$api.goodsType.findAll(this.name);
				if(res.code == 200) {
					this.typePickerList = [[...res.data]];
					this.typeList = res.data;
					this.typeList.unshift({ id: '', name: '全部' })
					// this.activeItem = this.typeList[0];
				}else this.$toast.error(this,res.message)
			}
		}
	}
</script>

<style lang="scss">
	.goods-content {
		height: 100vh;
		position: relative;
		margin-bottom: $safe-bottom-spacing;
		background-color: $gray-bg-color;

		.search {
			padding: $spacing-small 0;
			background-color: $white-bg-color;
		}

		.main-box {
			display: flex;
			height: 100%;

			.side-bar {
				overflow: scroll;
				padding-right: $spacing-small;
			}

			.main {
				overflow: scroll;
				background-color: $white-bg-color;
				padding: $spacing-small;
				
				.goods-list {
					padding-top: $spacing-small;
				}
			}
		}
	}
</style>